/* eslint-disable react/button-has-type */
/* eslint-disable no-nested-ternary */
import React, { FC } from 'react';
import { Icon } from 'choerodon-ui';
import styles from '../style.less';
import Img1 from '../assets/Model@3x.png';
import Img2 from '../assets/specs@3x.png';
import Cart from '../assets/add@3x.png';
import NoImage from '../assets/noImage@2x.png';
import SelectedImg from '../assets/selected@2x.png';
import unSelectedImg from '../assets/unselected@2x.png';
import Stepper from './Stepper';

export interface AllIntroduceProps {
  value: IntroduceProps;
  index: number;
  onChange: (type: string, value?: any, index?: number) => void;
  sider: boolean;
}

export interface IntroduceProps {
  img?: string;
  code: string;
  name: string;
  desc: string;
  otherName: string;
  collected: boolean;
  number: number;
  unit: string;
  price: number;
  saleUnit: string;
}

const MedicinesIntroduce: FC<AllIntroduceProps> = props => {
  const { value, index, onChange, sider } = props;
  return (
    <div className={styles['medical-show-circle']}>
      <div style={{ position: 'relative' }}>
        <img src={value.img ? value.img : NoImage} alt="" className={styles['medical-img']} />
        {!sider ? (
          value.collected ? (
            <img src={SelectedImg} alt="" className={styles['medical-collect-img']} />
          ) : (
            <img src={unSelectedImg} alt="" className={styles['medical-collect-img']} />
          )
        ) : null}
      </div>
      <div className={styles['medical-name']}>
        [{value.code}]{value.name}
      </div>
      <div className={styles['medical-desc']}>
        <img src={Img2} alt="" />
        <span>{value.desc}</span>
      </div>

      <div className={styles['medical-desc']}>
        <img src={Img1} alt="" />
        <span>{value.otherName}</span>
      </div>

      <div className={styles['medical-footer']}>
        {sider ? (
          <div>
            <Icon type="star" style={{ color: value.collected ? '#F8B303' : '' }} />
            <span>收藏</span>
          </div>
        ) : (
          <div style={{ fontFamily: 'PingFangSC-Regular', fontSize: '12px', color: '#525A6E' }}>
            <span>
              {value.number}
              {value.unit}
            </span>
            <span style={{ marginLeft: 5 }}>
              ¥{value.price}/{value.saleUnit}
            </span>
          </div>
        )}
        <Stepper value={value.number} index={index} onChange={onChange} />
        {sider && (
          <button className={styles['medical-add']}>
            <img src={Cart} alt="" />
            添加
          </button>
        )}
      </div>
    </div>
  );
};

export default MedicinesIntroduce;
